<!DOCTYPE html>
<html ng-app="tictactoe">
  <head>
    <title>AngularFire TicTacToe e2e Test</title>

    <!-- Angular -->
    <script src="../../../node_modules/angular/angular.min.js"></script>

    <!-- Firebase -->
    <script src="../../../node_modules/firebase/firebase.js"></script>

    <!-- AngularFire -->
    <script src="../../../dist/angularfire.js"></script>

    <!-- Initialize the Firebase SDK -->
    <script src="../../initialize.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="tictactoe.css">
  </head>

  <body ng-controller="TicTacToeCtrl">
    <!-- Firebase URL where data is stored (used by the test spec to know where data is stored) -->
    URL: <span id="url" ng-bind="url"></span>

    <!-- Reset Firebase button -->
    <button id="resetRef" ng-click="resetRef()">Reset Ref</button>

    <!-- Destroy button -->
    <button id="destroyButton" ng-click="destroy()">Destroy AngularFire bindings</button>

    <!-- Name input -->
    <div id="board">
      <div class="row" ng-repeat="(rowId, row) in board track by $index">
        <div class="cell" ng-repeat="(columnId, cell) in row track by $index" ng-click="makeMove(rowId, columnId)">
          {{ cell }}
        </div>
      </div>
    </div>

    <!-- Custom JS -->
    <script src="tictactoe.js" defer></script>
  </body>
</html>
